<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>增加用户</title>
<link type="text/css" rel="stylesheet" th:href="@{/css/page.css}" />
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}" ></script>
<!-- validation -->
<script type="text/javascript" th:src="@{/js/jquery/jquery.validate.js}" ></script>
<!-- layer -->
<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}" />
<script type="text/javascript" th:src="@{/plug/layui/layui.js}"  charset="utf-8"></script>

<link type="text/css" rel="stylesheet" th:href="@{/js/layer/skin/layer.css}"/>
<script type="text/javascript" th:src="@{/js/layer/layer.js}" ></script>

<style type="text/css">

.need_span{
	color: red;
	display: none;
}
.need_0, .validation_span{
	color: red;
}
.need_1{
	color: #666666;
}
.input_0{
	width: 200px;
}
.form_table td{
	padding: 5px;
}
.text_ad_0{
	font-weight: bold;
	color: #444444;
	white-space: nowrap;
}
</style>

<script type="text/javascript"  th:inline="javascript">

layui.use('laydate', function(){
	  var laydate = layui.laydate;
	  
	  //执行一个laydate实例
	  laydate.render({
	    elem: '#userBirthday' //指定元素
	  });
});

function getTime(val){
	if(val){		
		val = val.split("T");
		return val[0]; 
	}
	return "";
}
	
var manageUser = [[${manageUser}]];

$(function(){
	$(".re_password").hide();
	
   	if(manageUser){
   		//修改
   		$(".top_page_name").text("修改用户");
   		
   		//回填值
   		$("#userId").val(manageUser.userId);
   		//$("#password").val(manageUser.password);
   		//隐藏password文本框，改为重置密码
   		$("#userPassword").hide();
   		$("#userPassword").parent().parent().find(".text_ad_0").text("重置密码：");
   		$(".re_password").show();
   		$("#dept").val(manageUser.dept);
   		$("#userName").val(manageUser.userName);
   		$("#userTel").val(manageUser.userTel);
   		$("#position").val(manageUser.position);
   		$("#userBirthday").val(getTime(manageUser.userBirthday));
   		$(":radio[name='userSex'][value='"+manageUser.userSex+"']").attr("checked", "checked");
   		$("#userMail").val(manageUser.userMail);
   		$("#userAddress").val(manageUser.userAddress);
   		$("#userIdcard").val(manageUser.userIdcard);
   		$("select option[value='"+manageUser.userState+"']").attr("selected","selected");
   	}
	//验证数字长度
	$.validator.addMethod(
	    "mobilephone",
	    function (value, element, param){
	    	var length = value.length; 
	    	var mobile = /^[0-9]{11}$/;
	    	return this.optional(element) || (length == param && mobile.test(value)); 
	    },
	    "请输入正确的11位手机号码"
    );
	
	//验证工作号码
	$.validator.addMethod(
	    "workNumber",
	    function (value, element, param){
	    	//var length = value.length; 
	    	var mobile = /^((\d{3,5})-)(\d{6,10})(-(\d{1,5}))?$/;
	    	return this.optional(element) || mobile.test(value); 
	    },
	    "请输入正确的工作号码"
    );
	
	//验证id只包含数字字母
	$.validator.addMethod(
	    "withOutChinese",
	    function (value, element, param){
	    	var withOutChinese = /^[\w@.-]+$/;
	    	return this.optional(element) || withOutChinese.test(value); 
	    },
	    "请输入字母和数字的组合(可以有@_.-)"
    );
	
	//验证姓名(中文，数字，字母)
	$.validator.addMethod(
	    "onlyName",
	    function (value, element, param){
	    	var withOutChinese = /^([\u4E00-\u9FA5]|\w)*[^_]$/;
	    	return this.optional(element) || withOutChinese.test(value); 
	    },
	    "请输入正确的姓名"
    );
	
	//开始验证     
	$('form').validate({
		debug:true,
	    /**//* 设置验证规则 */    
	    rules: {     
	    	userId: {     
	            required:true,
	            rangelength:[2, 20],
	            withOutChinese: true,
	            remote:{  
	                 url:"/sa/checkUserId",
	                 type:"post",
	                 dataType:"text",
	                 async:false,  //默认true,异步
	                 data:{userId:function(){
	                	 return $.trim($("#userId").val());
	                 }},  
	                 dataFilter: function(data, type) {  
	                 	if(data){
	                 		if(manageUser){
	                 			if($.trim($("#userId").val()) == manageUser.userId){
	                 				return true;
	                 			}
	                 		}
	                 		return false;
	                 	}else{
	                 		return true;
	                 	}
	                 }  
	              }
	        },
	        userName: {     
	            required:true,
	            rangelength:[2, 20],
	            onlyName:true
	        },
	        userIdcard: {     
	            required:true,
	            rangelength:[18, 18],
	        },
	        userTel: {
	        	required:true,
	        	mobilephone:11
	        },
	        userMail: {
	        	//required:true,
	        	email:true,
	        	maxlength:100
	        },
	        userAddress: {
	        	//required:true,
	        	maxlength:100
	        },
	        userPassword: {
	        	required:true,
	        	rangelength:[6, 20]
	        }
	    },      
	    /**//* 设置错误信息 */    
	    messages: {     
	    	userId: {         
	        	required:"账号不可为空",
	        	rangelength:"账号必须在2-20个字符之间",
	        	remote:"账号已经存在"
	        },
	        userIdcard: {         
	        	required:"身份证号不可为空",
	        	rangelength:"输入的身份证错误",
	        },
	        userName: {         
	        	required:"姓名不可为空",
	        	rangelength:"姓名必须在2-20个字符之间",
	        	onlyName:"请输入正确的姓名(中文,数字,字母)"
	        },
	        userTel: {
	        	required:"移动电话号码不可为空",
	        	mobilephone:"请输入正确的手机号码"
	        },
	        userMail: {
	        	email:"请输入正确的邮箱",
	        	maxlength:"最多100个字符"
	        },
	        userAddress: {
	        	maxlength:"最多100个字符"
	        },
	        userPassword: {
	        	required:"密码不可为空",
	        	rangelength:"密码必须在6-20个字符之间"
	        }
	    },      
	    /**//* 设置验证触发事件 */
	    onsubmit:true,
	    /**//* 设置错误信息提示DOM */    
	    errorPlacement: function(error, element) {   
	    	$(element[0]).parent().find(".validation_span").text(error.html()).show();  
	    },
	    success:function(error, element){
	    	$(element[0]).parent().find(".validation_span").text("");  
        },
	    submitHandler: function (){
	    	save();
	    }
	});
	
	//返回按钮
	$("#backBtu").click(function(){
		layer.confirm('确认返回吗？', {icon: 3, title:'提示'}, function(index){
		    parent.layer.closeAll();
		});
	});
});

function closeSelf(){
    var i = layer.getFrameIndex();
	layer.close(i);
}

//保存
function save(){
	var param = new Object();
	param.userId = $.trim($("#userId").val());
	param.userPassword = $.trim($("#userPassword").val());
	param.userName = $.trim($("#userName").val());
	param.userTel = $.trim($("#userTel").val());
	var time = $("#userBirthday").val();
	if(time!=null && time!=''){		
		time = time.split('-');
		var myTime = new Date(time[0],(time[1]-1),time[2]);
		
		param.userBirthday = myTime;
	}
	param.userMail = $.trim($("#userMail").val());
	param.userAddress = $.trim($("#userAddress").val());
	param.userSex = $(":radio[name='userSex']:checked").val();
	param.position = $.trim($("#position").val());
	param.dept = $.trim($("#dept").val());
	param.userState = $("#userState").val();
	param.userIdcard = $("#userIdcard").val();
	var urlStr = "/sa/addUser";
	
	if(manageUser){
		//修改
		param.oldId = manageUser.userId
		urlStr = "/sa/updateUser";
		
		if($("input[name='rePassword']:checked").val() == "1"){
			//重置密码
			param.userPassword = "123456";
		}else{
			delete param.userPassword;
		}
	}
	
	layer.confirm('确认保存吗？', {icon: 3, title:'提示'}, function(index){
		$.ajax({
    		type:"POST",
    		async:true,  //默认true,异步
    		data:param,
    		url:urlStr,
    		success:function(data){
    			console.log(data);
    			if(data == "SUCCESS"){
    				layer.alert('保存成功！', {icon: 1}, function(indexOk){
       					parent.search();
       	    			parent.$("#add_iframe iframe").attr("src", "");
       			    	parent.$("div").first().show();
       			    	parent.$("#add_iframe").hide();
       			    	parent.layer.closeAll();
       				});
    			}else if(data == "LGINOUT"){
    				//重新登录
    				parent.window.location.href = "/logout";    				
    			}else{
    				layer.alert('保存失败！', {icon: 2}, function(indexNo){
    					parent.layer.closeAll();
       				});
    			}
    	    }
    	});
	});
}

</script>
</head>
<body>
<div  style="margin-left:15px; height: 400px;">
<div class="first_div" style="border:none;">
	<div id="adListDiv" align="left" >
	<form>
		<table class="form_table" style="border-collapse: collapse;margin-left:20px;margin-top:10px;">
			<tr>
				<td align="right" >
					<span class="need_0">*</span>
					<span class="text_ad_0">账号：</span>
				</td>
				<td>
					<input id="userId" type="text" name="userId" class="input_0"/>
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr>
				<td align="right" >
					<span class="need_0">*</span>
					<span class="text_ad_0">密码：</span>
				</td>
				<td>
					<input id="userPassword" type="text" name="userPassword" class="input_0" value="123456"/>
					<span class="re_password" style="margin-left:4px;" >(重置密码：123456)</span>
					<span class="re_password" style="margin-left:10px;" ></span>
					<input class="re_password" type="radio" id="rePassword" name="rePassword" value="0" checked="checked" /><span class="re_password">否</span>
					<input class="re_password" type="radio" id="rePassword" name="rePassword" value="1" /><span class="re_password">是</span>
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr>
				<td align="right" >
					<span class="need_0">*</span>
					<span class="text_ad_0">姓名：</span>
				</td>
				<td>
					<input id="userName" type="text" name="userName" class="input_0" />
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr>
				<td align="right" >
					<span class="need_0">*</span>
					<span class="text_ad_0">性别：</span>
				</td>
				<td>
					<input type="radio" id="userSex1" name="userSex" value="1" checked="checked" style="vertical-align:middle;" />
					<span style="vertical-align:middle;" >男</span>
					<input type="radio" id="userSex2" name="userSex" value="0" style="margin-left:10px;vertical-align:middle;" />
					<span style="vertical-align:middle;" >女</span>
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr style="">
				<td align="right" >
					<span class="need_0"></span>
					<span class="text_ad_0">出生日期：</span>
				</td>
				<td>
					<input id="userBirthday" type="text" name="userBirthday" class="input_0" value=""/>
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr>
				<td align="right" >
					<span class="text_ad_0">所属部门：</span>
				</td>
				<td>
					<input id="dept" type="text" name="dept" class="input_0" value=""/>
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr>
				<td align="right" >
					<span class="text_ad_0">职位：</span>
				</td>
				<td>
					<input id="position" type="text" name="position" class="input_0" value="" />
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr>
				<td align="right" >
					<span class="need_0">*</span>
					<span class="text_ad_0">移动电话：</span>
				</td>
				<td>
					<input id="userTel" type="text" name="userTel" class="input_0" />
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr>
				<td align="right" >
					<span class="text_ad_0">邮箱：</span>
				</td>
				<td>
					<input id="userMail" type="text" name="userMail" class="input_0" />
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr style="">
				<td align="right" >
					<span class="text_ad_0">地址：</span>
				</td>
				<td>
					<input id="userAddress" type="text" name="userAddress" class="input_0" value="" />
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr style="">
				<td align="right" >
				    <span class="need_0">*</span>
					<span class="text_ad_0">身份证号：</span>
				</td>
				<td>
					<input id="userIdcard" type="text" name="userIdcard" class="input_0" value="" />
					<span class="validation_span"></span>
				</td>
			</tr>
			<tr>
				<td style="" align="right">
					<span class="text_ad_0">用户类型：</span>
				</td>
				<td >
					<select id="userState" name="userState" class="input_0">
						<option value="1">老师</option>
						<option value="2">家长</option>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="left" >
					<div style="margin-top:10px;margin-bottom:20px;margin-left:120px;">
						<input type="submit" class="layui-btn" lay-submit="" lay-filter="add" id="saveBtu" name="saveBtu" value="保存" style="" />
						<input type="button" class="layui-btn" lay-submit="" lay-filter="add" id="backBtu" name="backBtu" value="返回" style="margin-left:20px;" />
					</div>
				</td>
			</tr>
		</table>
	</form>
		</div>
	</div>
</div>
</body>
</html>